<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <!-- 遍历数组里面的对象 -->
    <ul>
      <li v-for="(item,index) in booksList">
        <span>{{item.name}}</span>
        <button @click="deleteBook(item.id)">删除</button>
      </li>
    </ul>
    <!-- 遍历对象 -->
    <ul>
      <li v-for="(value,key,index) in person">{{value}}--{{key}}--{{index}}</li>
    </ul>
    <!-- 遍历字符串-->
    <ul>
      <li v-for="(item,index) in str">{{item}}--{{index}}</li>
    </ul>
    <!-- 遍历数字-->
    <ul>
      <li v-for="(item,index) in num">{{item}}--{{index}}</li>
    </ul>
    <!--
      v-for中的key属性 :
        预期：number | string | boolean (2.4.2 新增) | symbol (2.5.12 新增)
        key 的特殊 attribute 主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。如果不使用 key，
        Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。
        而使用 key 时，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。
        有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误
    -->
    <ul v-for="(item,index) in booksList" :key="item.id">
      <li>
        <input type="text">
        <span>{{item.name}}</span>
        <button @click="remove(item.id)">删除</button>
      </li>
    </ul>
  </div>
  <script src="../../javascript//vue.js"></script>
  <script>

    const vm = new Vue({
      el: "#app",
      data() {
        return {
          booksList: [
            { id: "001", name: "ES6标准入门" },
            { id: "002", name: "Vue.js设计与实现" },
            { id: "003", name: "JavaScript高级程序设计" },
            { id: "004", name: "JavaScript权威指南" },
          ],
          person: {
            name: "陶品奇",
            age: 22,
            address: "衡阳"
          },
          str: "vue",
          num: 10
        }
      },
      methods: {
        deleteBook(id) {
          //this.booksList= this.booksList.filter(item=>item.id!==id)
          /*根据id去找索引，然后用索引去删除元素*/
          const index = this.booksList.findIndex(item => item.id === id)
          this.booksList.splice(index, 1)
        },
        remove(id) {
          this.booksList = this.booksList.filter(item => item.id !== id)
        }
      }
    })
  </script>
</body>

</html>